import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Table, Row, Col, Button } from 'antd';
import {
  WeaTop,
  WeaLeftTree,
  WeaLeftRightLayout,
  WeaDropMenu,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaLocaleProvider,
  WeaNewScroll,
} from 'ecCom';
import NewsDetail from './newsDetail';

const getLabel = WeaLocaleProvider.getLabel;
const store = [
  'newsStore',
  'routing',
];
@inject(...store)

@observer
class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 0,
    };
  }
  componentDidMount() {
    window.addEventListener('resize', this.getTableHeight);
  }
  componentWillReceiveProps() {
  }
  componentWillUnmount() {
  }

  getTableHeight = () => {
    let height = $('.content-table').height() - 50;
    this.setState({ height });
  }

  getContent = (id) => {
    const { setState, getContent, selectedKeys, publishType } = this.props.newsStore;
    if (publishType == '0') {
      setState({ isDetail: true });
      getContent({ id, newsid: selectedKeys[0] });
    } else {
      window.open(`/spa/document/index.jsp?id=${id}&router=1#/main/document/detail`);
    }
  }

  backUp = () => {
    const { setState } = this.props.newsStore;
    setState({ isDetail: false });
  }

  getColumns = () => {
    const com = [{
      title: 'content',
      dataIndex: 'content',
      key: 'content',
      render: (text, record, index) => {
        const com = (<div className="content-table-single">
          {
            record.picid && <div className="single-img">
              <img src={`/weaver/weaver.file.FileDownload?fileid=${record.picid}`} style={{ width: record.width, height: '100%' }} />
            </div>
          }
          <div className="single-con" style={{ paddingLeft: record.width + 14 }}>
            <div className="single-con-title">
              <div className="date">{record.createdate}</div>
              <div className="subject wea-f14">{record.docsubject}</div>
            </div>
            <div className="single-con-content">
              <div className="disptmp">{record.disptmp}
              </div>
              <a className="detail" onClick={() => this.getContent(record.id)}>详细</a>
            </div>
          </div>
        </div>);
        return com;
      },
    }];
    return com;
  }
  render() {
    let { height } = this.state;
    const { newsStore } = this.props;
    const { listDatas: { list, pageNum, publishType, title, titleNews }
      , loadingList, isDetail, isFirstLoad } = newsStore;
    const total = toJS(list).length;
    if (height === 0) {
      height = $('.content-table').height() - 50;
    }
    return (
      <div className="wea-doc-news-content">
        <div className="content-title wea-f14">
          {
            isDetail && <div className="content-btn">
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yvwjqs`} onClick={this.backUp}>返回</Button>
            </div>
          }
          <div>{title}</div>
        </div>
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ppagoo`} height={'100%'}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dqv8ng`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@a94u3s`} span={toJS(titleNews).length !== 0 ? 20 : 24} className="content-right">
              <div className="content-table" ref="contentTable">
                {
                  isDetail ? <NewsDetail ecId={`${this && this.props && this.props.ecId || ''}_NewsDetail@nvv5fx`} /> :
                    isFirstLoad ? null : <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@mn0x76`}
                      columns={this.getColumns()}
                      showHeader={false}
                      loading={loadingList}
                      dataSource={toJS(list)}
                      pagination={{
                        pageSize: pageNum,
                        total,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        showTotal: total => `共${total}条`,
                      }}
                    />
                }
              </div>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r4f67m`} span={toJS(titleNews).length !== 0 ? 4 : 0} className="content-left">
              <div className="left-con">
                {
                  toJS(titleNews).length !== 0 && titleNews.map(v => (<div className="left-con-single">
                      <span className="dots" />
                      <a onClick={() => this.getContent(v.docid)}>{v.docsubject}</a>
                    </div>))
                }
              </div>
            </Col>
          </Row>
        </WeaNewScroll>
      </div>
    );
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@oilztv`} msg={props.error ? props.error : getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)(Main);

